<template>
    <div class="body">
        <div class="user-info">
            <van-image
            round
            width="4rem"
            height="4rem"
            :src="user.portrait"
            />
            <div class="name">
                <p>{{user.username}}</p>
                <p>欢迎回来~</p>
            </div>
            <router-link to="/qrcode" class="header-link">
                <i class="iconfont icon-erweima"></i>
            </router-link>
            <router-link to="/userInfo" class="header-link">
                <i class="iconfont icon-shezhi"></i>
            </router-link>
        </div>
        <van-cell-group>
            <van-cell title="余额" :value="user.integral"/>
        </van-cell-group>
        <van-cell-group>
            <van-cell title="我的订单" value="全部订单" is-link :url="node_env=='development'?'/#/orderList?active=A':'/sxplat/#/orderList?active=A'"/>
        </van-cell-group>
        <div class="order-list">
            <router-link :to="{path:'/orderList',query:{active:'B'}}" class="item">
                <i class="iconfont icon-daifukuan"></i>
                <p>待付款</p>
                <van-tag round type="danger" class="order-tag" v-if="order_type.wait_pay">{{order_type.wait_pay}}</van-tag>
            </router-link>
            <router-link :to="{path:'/orderList',query:{active:'1'}}" class="item">
                <i class="iconfont icon-daifahuo"></i>
                <p>待发货</p>
                <van-tag round type="danger" class="order-tag" v-if="order_type.wait_receipt">{{order_type.wait_receipt}}</van-tag>
            </router-link>
            <router-link :to="{path:'/orderList',query:{active:'3'}}" class="item">
                <i class="iconfont icon-daishouhuo"></i>
                <p>待收货</p>
                <van-tag round type="danger" class="order-tag" v-if="order_type.wait_reply">{{order_type.wait_reply}}</van-tag>
            </router-link>
            <router-link :to="{path:'/orderList',query:{active:'4'}}" class="item">
                <i class="iconfont icon-pinglun"></i>
                <p>待评价</p>
                <van-tag round type="danger" class="order-tag" v-if="order_type.wait_send">{{order_type.wait_send}}</van-tag>
            </router-link>
            <router-link :to="{path:'/orderList',query:{active:'-1,-2,-3'}}" class="item">
                <i class="iconfont icon-shouhou"></i>
                <p>退款/售后</p>
            </router-link>
        </div>
        <div class="swipe-content" v-if="order_list.length">
            <van-swipe class="my-swipe" indicator-color="#333">
                <template  v-for="item of order_list">
                    <van-swipe-item v-for="(i,k) of item.sub_order" :key='k' @click="goDetail(i)">
                        <van-cell :title="i.goods_data.name" :label="$moment(i.create_time*1000).format('YYYY-DD-MM hh:mm:ss')" :value="i.status == 0?'待出库':i.status == 1?'待发货':'已发货'">
                            <template #icon>
                                <van-image class="goods-img" width="50" height="50" :src="i.goods_data.image" />
                            </template>
                        </van-cell>
                    </van-swipe-item>
                </template>
            </van-swipe>
        </div>
        <div class="fun-list">
            <router-link  class="fun-item" to="/clerk">
                <img src="../assets/clerk.png">
                <p>店员管理</p>
            </router-link>
            <router-link  class="fun-item" to="/addressList">
                <img src="../assets/address (1).png">
                <p>地址管理</p>
            </router-link>
            <router-link  class="fun-item" to="/orderStatistics">
                <img src="../assets/statistics (1).png">
                <p>商品统计</p>
            </router-link>
            <a v-if="$store.getters.config.customer_phone" :href="'tel:'+service_phone" class="fun-item">
                <img src="../assets/service (1).png">
                <p>联系客服</p>
            </a>
        </div>
    </div>
</template>
<script>
import {orderNum,orderList} from '../ajax'
export default {
    data() {
        return {
            user:{},
            order_type:{},
            node_env:undefined,
            order_list:[],
            service_phone:null
        }
    },
    created(){
        this.user = this.$store.getters.wxUserInfo;
        this.service_phone = parseInt(this.$store.getters.config.customer_phone.value)
        // console.log(this.$store.getters.config);
        this.getOrderNum();
        this.node_env = process.env.NODE_ENV;
        this.getOrderList();
    },
    methods:{
        getOrderNum(){
            const data = {
                group_id:this.$store.getters.wxUserInfo.group_id
            }
            orderNum(data).then(res=>{
                this.order_type = res;
            })
        },
        getOrderList(index){
            // console.log(index);
            const data = {
                group_id:this.$store.getters.wxUserInfo.group_id,
                page:1,
                limit:20,
                status:'0,1,2'
            }
            orderList(data).then(res=>{
                let key = Object.keys(res);
                for(let i of key){
                    for(let item of res[i].sub_order){
                        item.goods_data = JSON.parse(item.goods_data);
                    }
                }
                this.order_list = res;
            })
        },
        goDetail(item){
            this.$store.commit('order_detail',item);
            this.$router.push('/orderDetail');
        }
    }
}
</script>
<style lang="scss" scoped>
    $white:#fff;
    $gray:#eee;
    .body{
        background: #eee;
        .user-info{
            width: 100%;
            height: 8rem;
            background: url('../assets/userCenter_bg.png') no-repeat;
            background-color: $white;
            background-size: 100% 100%;
            display: flex;
            justify-content: space-around;
            align-items: center;
            color: $white;
            .name{
                width: 50%;
                font-size: 0.8rem;
                p:first-child{
                    font-size: 1.2rem;
                    font-weight: bolder;
                }
            }
            .header-link{
                color: $white;
            }
            .iconfont{
                    font-size: 2rem;
                }
        }
        .van-cell__title{
            font-size: 1rem;
        }
        .order-list{
            width: 100%;
            height: 4rem;
            display: flex;
            background: $white;
            justify-content: space-around;
            align-items: center;
            .item{
                text-align: center;
                font-size: 0.7rem;
                color: #545454;
                position: relative;
                .iconfont{
                    font-size: 2rem;
                }
                .order-tag{
                    position: absolute;
                    top:-0.2rem;
                    right: -0.2rem;
                }
            }
        }
        .fun-list{
            width: 96%;
            min-height: 6rem;
            background: $white;
            margin-top: 0.8rem;
            display: flex;
            padding:1rem 2%;
            flex-wrap: wrap;
            .fun-item{
                width: 25%;
                height: 6rem;
                text-align: center;
                font-size: 0.8rem;
                font-weight: 700;
                color: #333;
                img{
                    width: 3.5rem;
                    height: 3.5rem;
                }
            }
        }
        .swipe-content{
            background: $white;
            width: 100%;
            height: 4rem;
            padding: 0.6rem 0;
                .my-swipe{
                    background: $gray;
                    height: 100%;
                    margin: auto;
                    .goods-img{
                        margin-right: 0.4rem;
                    }
                }
        }
    }
</style>